<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>博客管理系统</title>
    <link rel="stylesheet" href="css/common.css">

    <style>
        body { font-family: Arial, sans-serif;
            background: url('static/index.jpg') no-repeat;
            background-size: 100% 130%;
        }
        .article { margin-bottom: 20px; }
        .article h2 { margin: 0; }
        .article p { margin: 5px 0; }

        .articles-container {
        width: 80%;
        margin: 0 auto;
        max-height: 400px;
        overflow: auto;
        }

        .article {
            margin-bottom: 20px;
            border: 1px solid #ccc;
            padding: 10px;
            background-color: rgba(230, 230, 230, 0.5);
        }
        h1 {
            text-align: center;
            color: aqua;
        }

        #searchForm {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        #searchInput {
            padding: 5px;
            width: 200px;
            margin-right: 10px;
        }

        #searchForm button {
            padding: 5px 10px;
            background-color: #ccc;
            border: none;
            cursor: pointer;
        }

    </style>

</head>
<body>
    <!-- 这个是导航栏 -->
    <div class="nav">
        <img src="static\index.jpg" alt="">
        <span>博客管理系统</span>
        <!-- 空白元素,用来占位置 -->
        <div class="spacer"></div>
        <a href="index.html">主页</a>
        <a href="login_form.html">登录</a>
        <a href="admin.html">登录后台</a>
        <a href="#" id="logoutLink">注销</a>
    
    </div>
    <h1>公告</h1>
    <div class="articles-container" id="announcements">
        
    </div>

    <h1>本站文章</h1>
    <form id="searchForm">
        <input type="text" id="searchInput" placeholder="搜索文章标题">
        <button type="submit">搜索</button>
    </form>
    <div class="articles-container"  id="articles"></div>

    <script>
        async function fetchArticles(search = '') {
            try {
                let url = 'index_api.php';
                if (search) {
                    url += `?search=${encodeURIComponent(search)}`;
                }
                let response = await fetch(url);
                let data = await response.json();

                // 显示公告
                let announcementsContainer = document.getElementById('announcements');
                announcementsContainer.innerHTML = '';
                data.announcements.forEach(announcement => {
                    let announcementElement = document.createElement('div');
                    announcementElement.className = 'announcement';

                    let titleElement = document.createElement('h2');
                    let titleLink = document.createElement('a');
                    titleLink.textContent = announcement.title;
                    titleLink.href = `announcement_detail.html?id=${announcement.id}`;
                    titleLink.style.textDecoration = 'none';
                    titleElement.appendChild(titleLink);

                    let dateElement = document.createElement('p');
                    dateElement.textContent = `发布时间: ${announcement.created_at}`;

                    announcementElement.appendChild(titleElement);
                    announcementElement.appendChild(dateElement);

                    announcementsContainer.appendChild(announcementElement);
                });

                // 显示文章
                let articlesContainer = document.getElementById('articles');
                articlesContainer.innerHTML = '';
                data.articles.forEach(article => {
                    let articleElement = document.createElement('div');
                    articleElement.className = 'article';

                    let titleElement = document.createElement('h2');
                    let titleLink = document.createElement('a');
                    titleLink.textContent = article.title;
                    titleLink.href = `article_detail.html?id=${article.id}`;
                    titleLink.style.textDecoration = 'none';
                    titleElement.appendChild(titleLink);

                    let contentElement = document.createElement('p');
                    contentElement.textContent = article.content;

                    let authorElement = document.createElement('p');
                    authorElement.textContent = `作者: ${article.author_name}`;

                    let dateElement = document.createElement('p');
                    dateElement.textContent = `发布时间: ${article.created_at}`;

                    articleElement.appendChild(titleElement);
                    articleElement.appendChild(contentElement);
                    articleElement.appendChild(authorElement);
                    articleElement.appendChild(dateElement);

                    articlesContainer.appendChild(articleElement);
                });
            } catch (error) {
                console.error('Error fetching articles:', error);
            }
        }

        document.getElementById('searchForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const searchInput = document.getElementById('searchInput').value;
            fetchArticles(searchInput);
        });

        document.addEventListener('DOMContentLoaded', () => fetchArticles());
        //注销
        document.addEventListener('DOMContentLoaded', function() {
            const logoutLink = document.getElementById('logoutLink');
            
            // 添加注销链接的事件监听器
            logoutLink.addEventListener('click', function(event) {
                event.preventDefault();
                
                // 执行注销操作（清除会话数据等）
                logoutUser();

                // 重定向到登录页面或其他页面
                window.location.href = 'index.html'; // 替换为你的登录页面的URL
            });
        });

        function logoutUser() {
            //清除 localStorage 或 sessionStorage 中的数据
            localStorage.removeItem('authToken');
            // 清除其他与会话相关的数据
        }

        //主页
        document.addEventListener('DOMContentLoaded', () => {
        const homeLink = document.querySelector('.nav a[href="index.html"]');
    
        // 添加点击事件监听器
        homeLink.addEventListener('click', function(event) {
            // 阻止默认行为，即防止页面跳转
            event.preventDefault();
            // 提示用户已经在主页
            alert('您已经在主页啦！');
        });
});


    </script>
</body>
</html>
